<template>
	<view class="ogzList">
		<view class="listItem"
			v-for="(item,index) in ogzList"
			:key="index"
			@tap="goOgzDet(item.id)"
		>
			<view class="ogzCover defBg">
				<image class="samePar posAbso ltzero" mode="aspectFill" :src="item.ogzImg"></image>
			</view>
			<view class="bot">
				<view class="ogzName">
					<view class="logoView hasFlex">
						<image class="ogzLogoImg" v-if="item.headImg == ''" src="../../../../static/images/groupService/orgDef.png"></image>
						<image class="ogzLogoImg" v-else :src="getCloudFilePath(item.headImg)" mode="aspectFill" lazy-load></image>
						<view class="name ellip">{{item.ogzName}}</view>
					</view>
					<view class="distance" @tap.stop="goCurrPositionByDw(item.lon,item.lat,item.ogzName)">
						<text class="iconfont icon-daohang"></text>
						<text>距离{{distance(item.distance)}}km</text>
					</view>
				</view>
				<view class="address">地址:{{item.address}}</view>
			</view>
		</view>
		<loading-view :loading="loading"></loading-view>
	</view>
</template>

<script>
	export default {
		props:{
			ogzList:Array,
			loading:Boolean
		},
		computed:{
			distance(){
				return function(distance){
					return (distance/1000).toFixed(2)
				}
			}
		},
		methods:{
			goCurrPositionByDw(lon,lat,ogzName){
				this.$emit('goCurrPositionByDw',lon,lat,ogzName);
			},
			goOgzDet(id){
				this.$emit('goOgzDet',id)
			}
		}
	}
</script>

<style lang='scss' scoped>
	.ogzList{
		padding: 0 30rpx;
		.listItem{
			/* padding: 20rpx; */
			background: #fff;
			border-radius: 12rpx;
			margin-bottom: 30rpx;
			.ogzCover{
				width: 100%;
				height: 400rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				.samePar{
					z-index: 2;
					border-radius: 12rpx 12rpx 0 0;
				}
			}
			.bot{
				padding: 10rpx 30rpx 30rpx;
			}
			.ogzName{
				height: 70rpx;
				line-height: 70rpx;
				display: flex;
				justify-content: space-between;
				color: $pss-text-color3;
				.logoView{
					width: 70%;
					align-items: center;
				}
				.ogzLogoImg{
					width: 60rpx;
					height: 60rpx;
					border-radius: 50% !important;
					flex-shrink: 0;
					margin-right: 10rpx;
				}
				.name{
					width: 90%;
					font-size: 30rpx;
					font-weight: bold;
				}
				.distance{
					font-size: $font-size24;
					.icon-daohang{
						color: $pss-color-green;
						margin-right: 5rpx;
					}
				}
			}
			.address{
				font-size: $font-size24;
				color: $pss-text-colora;
			}
		}
	}
</style>